import React, {Component} from 'react';
import './index.css'

class Footer extends Component {
    handleChange = (event) => {
        this.props.checkAllTodo(event.target.checked)
    }
    handleClearAllChecked=()=>{
        this.props.clearAllChecked()
    }
    render() {
        const {todos} = this.props
        const total = todos.length
        const checkedNum = todos.reduce((pre, current) => pre + (current.checked ? 1 : 0), 0)
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={checkedNum === total && total != 0 ? true : false}
                           onChange={this.handleChange}/>
                </label>
                <span>
                    <span>已完成{checkedNum}</span> / 全部{total}
                </span>
                <button className="btn btn-danger" onClick={this.handleClearAllChecked}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;